<!-- 基本资料 -->
<template>
    <div style="background: #f8f8f9">
        <Tabs value="name1">
            <!-- 机构信息 -->
            <TabPane label="机构信息" name="name1">
                <Card>
                    <!-- 头部按钮 -->
                    <Row>
                        <Col span="24">
                        <Button type="primary" style="float: right;">修改机构信息</Button>
                        </Col>
                    </Row>
                    <div class="area">
                        <p class="fon">机构证件扫描件</p>
                        <Row type="flex" justify="space-between">
                            <!-- 左侧 -->
                            <Col span="11">
                            <span class="dis"></span>
                            <p style="margin: 15px 0">
                                <span style="display: inline-block;width: 20%">机构名称</span>
                                <Input placeholder="某机构" style="width: 60%; margin-left:2%" />
                            </p>
                            <p style="margin: 15px 0">
                                <span style="display: inline-block;width: 20%">法定代表人</span>
                                <Input placeholder="张三" style="width: 60%; margin-left:2%" />
                            </p>
                            <p style="margin: 15px 0">
                                <span style="display: inline-block;width: 20%">联系人</span>
                                <Input placeholder="张四" style="width: 60%; margin-left:2%" />
                            </p>
                            <p style="margin: 15px 0">
                                <span style="display: inline-block;width: 20%">联系电话</span>
                                <Input placeholder="12345678901" style="width: 60%; margin-left:2%" />
                            </p>
                            </Col>
                            <!-- 右侧 -->
                            <Col span="11">
                            <span class="dis"></span>
                            <p style="margin: 15px 0">
                                <span style="display: inline-block;width: 24%">统一社会信用代码</span>
                                <Input placeholder="1111111111" style="width: 60%; margin-left:2%" />
                            </p>
                            <p style="margin: 15px 0">
                                <span style="display: inline-block;width: 24%">地址</span>
                                <Input placeholder="新乡市红旗区商户大厦" style="width: 60%; margin-left:2%" />
                            </p>
                            <p style="margin: 15px 0">
                                <span style="display: inline-block;width: 24%">机构资质</span>
                                <Input placeholder="环境影响报告书甲级类别：轻工纺织" style="width: 60%; margin-left:2%" @on-focus="modalOrganization = true" />
                            </p>
                            </Col>
                        </Row>
                        <Row style="padding:20px 0">
                            <Col span="24" style="text-align:right">
                            <!-- 保存弹窗 -->
                            <Button type="primary" @click="instance('success')">保存</Button>
                            </Col>
                        </Row>
                    </div>
                </Card>
            </TabPane>
            <!-- 个人信息 -->
            <TabPane label="个人信息" name="name2">
                <Card>
                    <!-- 头部按钮 -->
                    <Row>
                        <Col span="24">
                        <Button type="primary" style="float: right;">修改个人信息</Button>
                        </Col>
                    </Row>
                    <div class="area">
                        <Row type="flex" justify="space-between">
                            <!-- 左侧 -->
                            <Col span="10">
                            <p style="margin: 15px 0">
                                <span style="display: inline-block;width: 20%">姓名</span>
                                <Input placeholder="张三" style="width: 60%; margin-left:2%" />
                            </p>
                            <p>
                                <span style="display: inline-block;width: 20%">性别</span>
                                <RadioGroup v-model="sex">
                                    <Radio label="man">
                                        <span>男</span>
                                    </Radio>
                                    <Radio label="women">
                                        <span>女</span>
                                    </Radio>
                                </RadioGroup>
                            </p>
                            <p style="margin: 15px 0">
                                <span style="display: inline-block;width: 20%">职位</span>
                                <Input placeholder="工程师" style="width: 60%; margin-left:2%" />
                            </p>
                            <p style="margin: 15px 0">
                                <span style="display: inline-block;width: 20%">所属部门</span>
                                <Input placeholder="某部门" style="width: 60%; margin-left:2%" />
                            </p>
                            <p style="margin: 15px 0">
                                <span style="display: inline-block;width: 20%">手机号</span>
                                <Input placeholder="12345678901" style="width: 60%; margin-left:2%" @on-focus="modalphon = true" />
                            </p>
                            </Col>
                            <!-- 右侧 -->
                            <Col span="10">
                            <p style="margin: 15px 0">
                                <span style="display: inline-block;width: 20%">头像</span>
                                <img src="">
                            </p>
                            <p style="margin: 15px 0">
                                <span style="display: inline-block;width: 20%">生日</span>
                                <Input placeholder="某部门" style="width: 60%; margin-left:2%" />
                            </p>
                            <p style="margin: 15px 0">
                                <span style="display: inline-block;width: 20%">邮箱</span>
                                <Input placeholder="12345678901" style="width: 60%; margin-left:2%" />
                            </p>
                            <p style="margin: 15px 0">
                                <span style="display: inline-block;width: 20%">qq</span>
                                <Input placeholder="12345678901" style="width: 60%; margin-left:2%" />
                            </p>
                            <p style="margin: 15px 0">
                                <span style="display: inline-block;width: 20%">微信</span>
                                <Input placeholder="12345678901" style="width: 60%; margin-left:2%" />
                            </p>
                            </Col>
                        </Row>
                    </div>
                    <Row style="padding:20px 0">
                        <Col span="24" style="text-align:right">
                        <!-- 保存弹窗 -->
                        <Button type="primary" @click="instance('success')">保存</Button>
                        </Col>
                    </Row>
                    <Modal v-model="modalphon" title="绑定手机号" @on-ok="ok" @on-cancel="cancel">
                        <p>
                            <Input v-model="value" placeholder="请输入手机号..." style="width: 300px" />
                        </p>
                        <p>
                            <Input v-model="value" placeholder="请再次输入..." style="width: 300px" />
                        </p>
                    </Modal>
                </Card>
            </TabPane>
            <!-- 人员管理 -->
            <TabPane label="人员管理" name="name3">
                <Card>
                    <!-- 头部按钮 -->
                    <Row type="flex" justify="start">
                        <Col span="2">
                        <Input placeholder="姓名" style="width: 70%; margin-left:2%" />
                        </Col>
                        <Col span="2">
                        <Input placeholder="部门" style="width: 70%; margin-left:2%" />
                        </Col>
                        <Col span="2">
                        <Input placeholder="职位" style="width: 70%; margin-left:2%" />
                        </Col>
                        <Col span="2">
                        <Button type="primary" size="large">查找</Button>
                        </Col>
                        <Col span="2">
                        <Button type="primary" size="large">清除</Button>
                        </Col>
                    </Row>
                    <!-- 上部表格 -->
                    <Table border :columns="columns1" :data="data1" style="margin-top: 10px"></Table>
                </Card>
                <!-- 下部表格 -->
                <Row type="flex" justify="space-between" style="margin-top: 10px">
                    <!-- 左侧卡片 -->
                    <Col span="11">
                    <Card>
                        <!-- 头部 -->
                        <Row>
                            <Col span="12">
                            <h3>创建部门</h3>
                            </Col>
                            <Col span="12">
                            <Button type="primary" style="float: right;">添加</Button>
                            </Col>
                        </Row>
                        <!-- 左侧表格 -->
                        <Table border :columns="columns2" :data="data2" style="margin-top: 10px"></Table>
                    </Card>
                    </Col>
                    <!-- 右侧卡片  -->
                    <Col span="11">
                    <Card>
                        <!-- 头部 -->
                        <Row>
                            <Col span="12">
                            <h3>创建职位</h3>
                            </Col>
                            <Col span="12">
                            <Button type="primary" style="float: right;">添加</Button>
                            </Col>
                        </Row>
                        <!-- 右侧表格 -->
                        <Table border :columns="columns3" :data="data3" style="margin-top: 10px"></Table>
                    </Card>
                    </Col>
                </Row>
            </TabPane>
        </Tabs>
        <!-- 机构资质对话框 -->
        <Modal v-model="modalOrganization" title="机构资质">
            <Row>
                <Col span="8">
                <p>甲醛报告书评价范围</p>
                    <RadioGroup v-model="vertical" vertical>
                        <Radio label="轻工纺织化纤"></Radio>
                        <Radio label="化工石化医药"></Radio>
                        <Radio label="冶金机电"></Radio>
                        <Radio label="建材火电"></Radio>
                        <Radio label="农林水利"></Radio>
                    </RadioGroup>
                </Col>
                <Col span="8">
                <p>甲醛报告书评价范围</p>
                    <RadioGroup v-model="vertical1" vertical>
                        <Radio label="金斑蝶"></Radio>
                        <Radio label="爪哇犀牛"></Radio>
                        <Radio label="印度黑羚"></Radio>
                    </RadioGroup>
                </Col>
                <Col span="8">
                <p>甲醛报告书评价范围</p>
                <RadioGroup v-model="vertical2" vertical>
                    <Radio label="一般项目"></Radio>
                    <Radio label="核与辐射项目"></Radio>
                    <Radio label="印度黑羚"></Radio>
                </RadioGroup>
                </Col>
            </Row>
        </Modal>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                vertical: '',
                vertical1: '',
                vertical2: '',
                value: "",
                modalOrganization: false,
                modalphon: false,
                sex: "man",
                columns1: [{
                        title: "职位名称",
                        key: "name1",
                        align: "center"
                    },
                    {
                        title: "姓名",
                        key: "name2",
                        align: "center"
                    },
                    {
                        title: "性别",
                        key: "sex",
                        align: "center",
                        render: (h, params) => {
                            return h("div", [h("Select", {})]);
                        }
                    },
                    {
                        title: "公司级别",
                        key: "level",
                        align: "center",
                        render: (h, params) => {
                            return h("div", [h("Select", {})]);
                        }
                    },
                    {
                        title: "所属部门",
                        key: "depart",
                        align: "center",
                        render: (h, params) => {
                            return h("div", [h("Select", {})]);
                        }
                    },
                    {
                        title: "账号密码",
                        key: "num",
                        align: "center",
                        render: (h, params) => {
                            return h("div", [h("Select", {})]);
                        }
                    },
                    {
                        title: "操作",
                        key: "opera",
                        align: "center",
                        render: (h, params) => {
                            return h("div", [
                                h(
                                    "Button", {
                                        props: {
                                            type: "primary",
                                            size: "small"
                                        },
                                        style: {
                                            marginRight: "5px"
                                        }
                                    },
                                    "添加"
                                ),
                                h(
                                    "Button", {
                                        props: {
                                            type: "error",
                                            size: "small"
                                        },
                                        style: {
                                            marginRight: "5px"
                                        }
                                    },
                                    "删除"
                                ),
                                h(
                                    "Button", {
                                        props: {
                                            type: "warning",
                                            size: "small"
                                        }
                                    },
                                    "重置密码"
                                )
                            ]);
                        }
                    }
                ],
                data1: [{
                        name1: "总工",
                        name2: "张三"
                    },
                    {
                        name1: "总工",
                        name2: "张三"
                    },
                    {
                        name1: "总工",
                        name2: "张三"
                    },
                    {
                        name1: "总工",
                        name2: "张三"
                    },
                    {
                        name1: "总工",
                        name2: "张三"
                    },
                    {
                        name1: "总工",
                        name2: "张三"
                    }
                ],
                columns2: [{
                        title: "部门名称",
                        key: "name3",
                        align: "center"
                    },
                    {
                        title: "职位权限",
                        align: "center",
                        render: (h, params) => {
                            return h("div", [h("Select", {})]);
                        }
                    },
                    {
                        title: "操作",
                        key: "opera1",
                        align: "center",
                        render: (h, params) => {
                            return h("div", [
                                h(
                                    "Button", {
                                        props: {
                                            type: "error",
                                            size: "small"
                                        }
                                    },
                                    "删除"
                                )
                            ]);
                        }
                    }
                ],
                data2: [{
                        name3: "技术部"
                    },
                    {
                        name3: "技术部"
                    },
                    {
                        name3: "技术部"
                    },
                    {
                        name3: "技术部"
                    },
                    {
                        name3: "技术部"
                    }
                ],
                columns3: [{
                        title: "职位名称",
                        key: "name3",
                        align: "center"
                    },
                    {
                        title: "职位权限",
                        align: "center",
                        render: (h, params) => {
                            return h("div", [h("Select", {})]);
                        }
                    },
                    {
                        title: "操作",
                        key: "opera1",
                        align: "center",
                        render: (h, params) => {
                            return h("div", [
                                h(
                                    "Button", {
                                        props: {
                                            type: "error",
                                            size: "small"
                                        }
                                    },
                                    "删除"
                                )
                            ]);
                        }
                    }
                ],
                data3: [{
                        name3: "技术部"
                    },
                    {
                        name3: "技术部"
                    },
                    {
                        name3: "技术部"
                    },
                    {
                        name3: "技术部"
                    },
                    {
                        name3: "技术部"
                    }
                ]
            };
        },
        methods: {
            instance(type) {
                const title = "个人信息修改成功";
                const content = "<p>3m后自动退出</p>";
                this.$Modal.success({
                    title: title,
                    content: content
                });
                setTimeout(() => {
                    this.$Modal.remove();
                }, 3000);
            },
            ok() {
                this.instance()
            },
            instance(type) {
                const title = '手机号绑定成功';
                const content = '<p>3s后自动自动退出</p>';
                this.$Modal.success({
                    title: title,
                    content: content
                });
                setTimeout(() => {
                    this.$Modal.remove();
                }, 3000);
            },
            cancel() {
                this.$Message.info('点击取消');
            }
        }
    };
</script>
<style lang="less">
    .area {
        width: 100%;
        height: 100%;
        background: #f3f3f4;
        padding: 2% 3%;
        margin-top: 10px;
    }

    .dis {
        display: inline-block;
        width: 100%;
        height: 300px;
        background: #c1c1c1;
    }

    .fon {
        font-weight: bold;
        margin-bottom: 1%;
    }
</style>
